<template>
  <div ref="staticBarCon" class="w-full h-full" />
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  markRaw,
  nextTick
} from "vue";
import * as echarts from "echarts";

const staticBarCon = ref();
const staticBarConInstance = ref();
const initStaticBarOption = ref({});
initStaticBarOption.value = {
  title: {
    text: "医疗废物管理",
    subtext: "总数: 7899.18",
    show: false,
    textStyle: {
      color: "#fff",
      fontSize: 16
    },
    subtextStyle: {
      color: "#999",
      fontSize: 12
    },
    x: "center",
    top: "30%"
  },
  grid: {
    top: "30%",
    bottom: "33%"
  },
  tooltip: {},
  xAxis: {
    data: ["今日产生(kg)", "今日收集(kg)", "今日处置(kg)"],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "#ffffff",
        fontSize: 15
      },
      margin: 30 //刻度标签与轴线之间的距离。
    }
  },
  yAxis: {
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  series: [
    // 顶部圆圈
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [50, 20],
      symbolOffset: [0, -10],
      z: 12,
      data: [
        {
          name: "今日产生(kg)",
          value: "4515.07",
          trueVal: "98",
          symbolPosition: "end",
          itemStyle: {
            normal: {
              color: "#00fff5" //圆柱顶部颜色
            }
          }
        },
        {
          name: "今日收集(kg)",
          value: "6793.41",
          trueVal: "100",
          symbolPosition: "end",
          itemStyle: {
            normal: {
              color: "#ffcc00" //圆柱顶部颜色
            }
          }
        },
        {
          name: "今日处置(kg)",
          value: "5058.01",
          trueVal: "90",
          symbolPosition: "end",
          itemStyle: {
            normal: {
              color: "#b9b7ff" //圆柱顶部颜色
            }
          }
        }
      ]
    },
    // 底部圆圈
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [50, 20],
      symbolOffset: [0, 12],
      z: 12,
      data: [
        {
          name: "今日产生(kg)",
          value: "4515.07",
          trueVal: "98",
          itemStyle: {
            normal: {
              color: "#43bafe" //圆柱底部颜色
            }
          }
        },
        {
          name: "今日收集(kg)",
          value: "6793.41",
          trueVal: "100",
          itemStyle: {
            normal: {
              color: "#ff7800" //圆柱底部颜色
            }
          }
        },
        {
          name: "今日处置(kg)",
          value: "5058.01",
          trueVal: "90",
          itemStyle: {
            normal: {
              color: "#e9a5ff" //圆柱底部颜色
            }
          }
        }
      ]
    },
    // 内层圈线
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [65, 20],
      symbolOffset: [0, 18],
      z: 11,
      data: [
        {
          name: "今日产生(kg)",
          value: "4515.07",
          trueVal: "98",
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#43bafe", //底部内圆圈颜色
              borderWidth: 5
            }
          }
        },
        {
          name: "今日收集(kg)",
          value: "6793.41",
          trueVal: "100",
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#ff7800", //底部内圆圈颜色
              borderWidth: 5
            }
          }
        },
        {
          name: "今日处置(kg)",
          value: "5058.01",
          trueVal: "90",
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#e9a5ff", //底部内圆圈颜色
              borderWidth: 5
            }
          }
        }
      ]
    },
    // 外层圈线
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [90, 30],
      symbolOffset: [0, 25],
      z: 10,
      data: [
        {
          name: "今日产生(kg)",
          value: "4515.07",
          trueVal: "98",
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#43bafe", //底部外圆圈颜色
              borderType: "dashed",
              borderWidth: 5
            }
          }
        },
        {
          name: "今日收集(kg)",
          value: "6793.41",
          trueVal: "100",
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#ff7800", //底部外圆圈颜色
              borderType: "dashed",
              borderWidth: 5
            }
          }
        },
        {
          name: "今日处置(kg)",
          value: "5058.01",
          trueVal: "90",
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: "#e9a5ff", //底部外圆圈颜色
              borderType: "dashed",
              borderWidth: 5
            }
          }
        }
      ]
    },
    // 柱子
    {
      type: "bar",
      silent: true,
      barWidth: 50,
      barGap: "10%",
      data: [
        {
          name: "今日产生(kg)",
          value: "4515.07",
          trueVal: "98",
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 15,
              textStyle: {
                color: "#00fff5", //柱子对应数值颜色
                fontSize: 16
              }
            }
          },
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,255,245,0.5)"
                  },
                  {
                    offset: 1,
                    color: "#43bafe" //底部渐变颜色
                  }
                ]
              }
            }
          }
        },
        {
          name: "今日收集(kg)",
          value: "6793.41",
          trueVal: "100",
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 15,
              textStyle: {
                color: "#ffcc00", //柱子对应数值颜色
                fontSize: 16
              }
            }
          },
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,204,0,0.5)"
                  },
                  {
                    offset: 1,
                    color: "#ff7800" //底部渐变颜色
                  }
                ]
              }
            }
          }
        },
        {
          name: "今日处置(kg)",
          value: "5058.01",
          trueVal: "90",
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 15,
              textStyle: {
                color: "#b9b7ff", //柱子对应数值颜色
                fontSize: 16
              }
            }
          },
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(185,183,255,0.5)"
                  },
                  {
                    offset: 1,
                    color: "#e9a5ff" //底部渐变颜色
                  }
                ]
              }
            }
          }
        }
      ]
    }
  ]
};

// 初始化图表
const initStaticBarChart = () => {
  staticBarConInstance.value = markRaw(echarts.init(staticBarCon.value));
  staticBarConInstance.value.setOption(initStaticBarOption.value, true);
};

// 卸载前动作 -- 销毁图表 -- 避免内存泄漏
onBeforeUnmount(() => {
  staticBarConInstance.value.dispose();
});

// 挂载后动作 -- 初始化图表
onMounted(() => {
  nextTick(() => {
    initStaticBarChart();
    // 图表自适应
    window.addEventListener("resize", () => {
      staticBarConInstance.value.resize();
    });
  });
});

defineOptions({
  name: "StaticBar"
});
</script>
